<script setup lang="ts" name="mine">
import {ref, onMounted, reactive} from "vue";
import { ElMessage, ElMessageBox } from 'element-plus';
import { Session } from '/@/utils/storage';
import { useRoute, useRouter } from "vue-router";
import { useUsersApi } from "/src/api/users";

import MainColumns from "/@/components/common/main-columns.vue";
import MainHeader from "/@/components/common/main-header.vue";

const router = useRouter();
const route = useRoute();
const ruleFormRef = ref(null);
const lxsAppData = reactive({
	tab: {
		type: ref(0),
		secondName: ref('')
	},
	userInfo: {},
	ruleForm: {
		realname: '',
		mobile: '',
		id_card: '',
		agreement: false,
	},
	platformData: [
		{name: '我的信息', path: '/mine'},
		{name: '收款账号', path: '/mine/payee_account'},
		{name: '注销账户', path: '/mine/cancel_account'},
	],
})

// 左侧平台点击
const platformDataClick = (index) => {
	if (lxsAppData.tab.type === index) return
	router.push({
		path: lxsAppData.platformData[index].path
	})
}

// 重置提交
const onCancel = () => {
	lxsAppData.ruleForm = {
		realname: '',
		mobile: '',
		id_card: '',
		agreement: false,
	}
}

// 重新提交
const resetSubmit = () => {
	lxsAppData.ruleForm = {
		realname: '',
		mobile: '',
		id_card: '',
		agreement: false,
	}
	lxsAppData.userInfo.user_authentication = null;
}

const rules = reactive ({
	realname: [
		{ required: true, message: '请输入联系人姓名', trigger: 'blur' }
	],
	mobile: [
		{ required: true, message: '请输入联系人手机号码', trigger: 'blur' },
		{ trigger: 'blur', validator: (rule, value, callback) => {
				if (/^1[3456789]\d{9}$/.test(value)) {
					callback();
				} else {
					callback(new Error('手机号码格式不正确'));
				}
		}}
	],
	id_card: [
		{ required: true, message: '请输入身份证号码', trigger: 'blur' },
		{ trigger: 'blur', validator: (rule, value, callback) => {
				if (/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(value)) {
					callback();
				} else {
					callback(new Error('身份证格式不正确'));
				}
		}}
	],
})

// 提交
const onSubmit = () => {
	ruleFormRef.value.validate((valid, fields) => {
		if (valid) {
			if (lxsAppData.ruleForm.agreement === false) {
				ElMessageBox.alert('请勾选同意协议', '提示', {
					confirmButtonText: '确定',
					type: 'warning',
				});
				return;
			}
			useUsersApi().realNameAuthenticationSubmit(lxsAppData.ruleForm).then((res) => {
				console.log('提交实名认证', res);
				if (res.code === 200) {
					ElMessage.success(res.message);
					getPageData();
				} else {
					ElMessage.error(res.message);
					onCancel();
				}
			})
		} else {
			console.log('error submit!', fields)
		}
	})
};

// 获取页面数据
const getPageData = async () => {
	const res = await useUsersApi().getUserInfo({});
	lxsAppData.userInfo = res.data.user_info;
	console.log('获取实名认证页面数据', lxsAppData.userInfo);
}

onMounted(() => {
	lxsAppData.tab.secondName = lxsAppData.platformData[lxsAppData.tab.type].name;
	getPageData();
});
</script>

<template>
	<div class="layout-container flex">

		<MainColumns :active="lxsAppData.tab.type" :items="lxsAppData.platformData" @click="platformDataClick" />

		<div class="layout-main">

			<MainHeader :second-name="lxsAppData.tab.secondName"/>

			<div class="main-content">

				<el-card shadow="hover" class="layout-padding-auto">

					<div class="simple2" v-if="lxsAppData.userInfo.user_authentication">
						<div class="simple-header-tips" v-if="lxsAppData.userInfo.user_authentication.status == 0">
							<div class="simple-header-tips-icon">
								<img src="https://ouan-retail.oss-cn-shenzhen.aliyuncs.com/web/icon/%E5%AE%A1%E6%A0%B8%E4%B8%AD.png" alt="">
								<p>审核中</p>
							</div>
							<text>我们将在1-2个工作日内对您的信息进行审核，请耐心等待</text>
						</div>
						<div class="simple-header-tips" v-else-if="lxsAppData.userInfo.user_authentication.status == 1">
							<div class="simple-header-tips-icon">
								<img src="https://ouan-retail.oss-cn-shenzhen.aliyuncs.com/web/icon/%E5%AE%A1%E6%A0%B8%E9%80%9A%E8%BF%87.png" alt="">
								<p>审核通过</p>
							</div>
							<text>恭喜您！个人信息审核通过</text>
						</div>
						<div class="simple-header-tips" v-else-if="lxsAppData.userInfo.user_authentication.status == 2">
							<div class="simple-header-tips-icon">
								<img src="https://ouan-retail.oss-cn-shenzhen.aliyuncs.com/web/icon/%E5%AE%A1%E6%A0%B8%E5%A4%B1%E8%B4%A5.png" alt="">
								<p>审核失败</p>
							</div>
							<text>很抱歉！个人信息审核未通过</text>
							<div class="reset-submit" @click="resetSubmit">重新提交</div>
						</div>
						<div class="simple mt30">
							<el-form label-width="120px" style="max-width: 612px">
								<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
									<el-form-item label="联系人姓名">
										<el-input readonly v-model="lxsAppData.userInfo.user_authentication.realname" placeholder="请输入联系人姓名" />
									</el-form-item>
									<el-form-item label="联系人手机号码">
										<el-input readonly v-model="lxsAppData.userInfo.user_authentication.mobile" placeholder="请输入联系人手机号码" />
									</el-form-item>
									<el-form-item label="身份证号码">
										<el-input readonly v-model="lxsAppData.userInfo.user_authentication.id_card" placeholder="请输入身份证号码" />
									</el-form-item>
								</el-col>
							</el-form>
						</div>
					</div>

					<div class="simple" v-else>
						<div class="simple-header-tips">
							<img src="https://ouan-retail.oss-cn-shenzhen.aliyuncs.com/web/icon/%E6%8F%90%E7%A4%BA.png" alt="">
							<text>温馨提示：请务必填写本人真实信息、姓名、身份证号码。否则可能会影响提现操作</text>
						</div>
						<div class="simple-main">
							<el-form ref="ruleFormRef" :model="lxsAppData.ruleForm" :rules="rules" label-width="120px" style="max-width: 612px">
								<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
									<el-form-item label="联系人姓名" prop="realname">
										<el-input v-model="lxsAppData.ruleForm.realname" placeholder="请输入联系人姓名" />
									</el-form-item>
									<el-form-item label="联系人手机号码" prop="mobile">
										<el-input v-model="lxsAppData.ruleForm.mobile" placeholder="请输入联系人手机号码" />
									</el-form-item>
									<el-form-item label="身份证号码" prop="id_card">
										<el-input v-model="lxsAppData.ruleForm.id_card" placeholder="请输入身份证号码" />
									</el-form-item>
								</el-col>

								<el-form-item class="simple-main-agreement">
									<el-checkbox v-model="lxsAppData.ruleForm.agreement" label="" size="large" />
									<text>我已阅读并同意</text>
									<text class="agreement-text" @click="router.push({path: '/mine/auth_agreement'})">【实名认证服务协议】</text>
								</el-form-item>

								<el-form-item class="simple-main-footer">
									<el-button class="submit-btn" @click="onSubmit" size="large">点击认证</el-button>
									<el-button class="cancel-btn" @click="onCancel" size="large">重置信息</el-button>
								</el-form-item>
							</el-form>
						</div>
					</div>

				</el-card>

			</div>

		</div>

	</div>
</template>

<style lang="scss">
.el-form-item__label {
	font-size: 14px;
	color: #000000;
	text-align: right;
}
.el-input {
	width: 329px;
	background: #F2F4F7;
}
.el-input__wrapper {
	background: #F2F4F7;
}
.submit-btn {
	color: #FFFFFF;
	background: #FC661C;
	border-radius: 5px 5px 5px 5px;
	border: none !important;
}
.cancel-btn {
	color: #FC661C;
	background: rgba(252,102,28,0.12);
	border-radius: 5px 5px 5px 5px;
	border: none !important;
	margin-left: 32px !important;
}
/* 修改复选框的背景色 */
.el-checkbox__input {
	background-color: #FC661C; /* 红色背景 */
}

/* 修改复选框勾选后的颜色 */
.el-checkbox__input.is-checked .el-checkbox__inner {
	border-color: #FC661C; /* 勾选后边框颜色 */
	background-color: #FC661C; /* 勾选后背景颜色 */
}

/* 修改复选框勾选后的图标 */
.el-checkbox__input.is-checked .el-checkbox__inner::after {
	border-color: #fff; /* 勾选后图标颜色 */
}

/* 修改文本颜色 */
.el-checkbox__label {
	color: #fff; /* 文本颜色 */
}

.layout-padding-auto {
	min-height: 80vh;
}

.simple {
	max-width: 612px;
	margin: 60px auto;
	border: 1px solid #ECECEC;
	padding: 20px;

	.simple-header-tips {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 12px;
		color: #000000;

		img {
			width: 16px;
			height: 16px;
		}
		text {
			background: linear-gradient( 90deg, #FFEBE9 0%, #FFFFFF 100%);
			padding: 8px 12px;
			text-indent: 10px;
		}
	}

	.simple-main {
		margin-top: 30px;

		.el-form {
			.simple-main-footer {
				margin: 32px auto 0;
				display: flex;
				justify-content: space-around;
				align-items: center;

				text {
					font-size: 14px;
					cursor: pointer;
				}
			}

			.simple-main-agreement {

				text {
					text-indent: 7px;
					font-size: 12px;
					color: #000000;
				}
				.agreement-text {
					color: #FC661C;
					cursor: pointer;
				}
				.agreement-text:hover {
					text-decoration: underline;
					font-weight: bold;
				}
			}
		}
	}
}

.simple2 {
	max-width: 612px;
	margin: 60px auto 0;

	.simple-header-tips {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;

		.simple-header-tips-icon {
			display: flex;
			align-items: center;
			margin: 5px auto;

			img {
				width: 48px;
				height: 48px;
				margin-right: 5px;
			}

			p {
				font-weight: bold;
				font-size: 18px;
				color: #000000;
				text-indent: 5px;
			}
		}

		text {
			font-size: 14px;
			color: #000000;
			background: linear-gradient( 90deg, #FFEBE9 0%, #FFFFFF 100%);
			padding: 8px 12px;
		}

		.reset-submit {
			width: 144px;
			height: 36px;
			line-height: 36px;
			font-size: 12px;
			color: #FFFFFF;
			background: #FC661C;
			border-radius: 5px 5px 5px 5px;
			margin-top: 12px;
			cursor: pointer;
		}
	}
}
</style>